<template>
  <div>
    <div style="width: 100%;padding-left: 20px;padding-top: 15px;color: #3ea0f1;font-size: 14px">
      <span id="span-right">
        申请医院：
        <el-select v-model="hospitalId" class="m-2" placeholder="请选择申请医院" style="width:12%"
                   @change="getCountHospital">
          <el-option
              v-for="item in hospitals"
              :key="item.id"
              :label="item.name"
              :value="[item.name]"
          />
        </el-select>
      </span>

      <span id="span-right">
        <el-button type="primary" icon="Search" @click="getCaseByHospital">搜索病例</el-button>
      </span>

    </div>

    <hr>

    <div>
      <el-table
          :data="tbd.list"
          style="width: 100%"
          v-loading="loading"
          @selection-change="handleSelectionChange"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
          stripe
      >
        <el-table-column type="index" width="50" />
        <el-table-column property="id" label="会诊编号"/>
        <el-table-column property="emrCase.name" label="病人姓名" width="80"/>
        <el-table-column property="emrCase.sex" label="性别" width="70">
          <template #default="scope">
            <span v-text="scope.row.emrCase.sex == 1 ? '男' : '女'"></span>
          </template>
        </el-table-column>
        <el-table-column property="emrCase.age" label="年龄" width="70"/>
        <el-table-column property="specimen" label="手术部位" show-overflow-tooltip/>
        <el-table-column prop="apmdate" label="预约时间" sortable show-overflow-tooltip>
          <template #default="scope">
            <span>{{ parseTime(scope.row.apmdate) }}</span>
          </template>
        </el-table-column>
        <el-table-column property="expertName" label="临床医生" width="80"/>
        <el-table-column property="emrCase.mobile" label="联系电话" width="130"/>
        <el-table-column property="remarks" label="备注" width="80" show-overflow-tooltip/>
        <el-table-column property="emrCase.sendHospital" label="送检医院" show-overflow-tooltip/>
        <el-table-column prop="apmdate" label="申请时间" sortable show-overflow-tooltip>
          <template #default="scope">
            <span>{{ parseTime(scope.row.emrCase.application_date) }}</span>
          </template>
        </el-table-column>
        <el-table-column property="emrCase.expertName" label="意向专家" width="80"/>
      </el-table>
      <div style="width: 100%;margin-top: 5px;border-bottom: 2px #EBEEF4 solid;position: fixed;left: 0;bottom: 0">
        <el-pagination
            style="display:flex;justify-content: center; align-items:center;padding-bottom: 5px"
            v-model:current-page="pages.pageNum"
            v-model:page-size="pages.pageSize"
            :page-sizes="[10, 19]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tbd.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog
          v-model="dialogVisible"
          title="提示"
          width="30%"
      >
        <span v-if="dialogStatus == 0">确定要分配吗？</span>
        <span v-if="dialogStatus == 1">确定要退回吗？</span>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="definiteAllocation" v-if="dialogStatus == 0">
          确定
        </el-button>
        <el-button type="primary" @click="returnSite" v-if="dialogStatus == 1">
          确定
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import * as triage from '@/api/triage/triage'
import * as frozen from '@/api/frozen/frozen'
import { ElMessage } from 'element-plus'

//当前选中病理类型id
let pathologyid = ref('0')

let pathologys = ref([])

let caseNo = ref(null)

let name = ref(null)

//当前选中申请医院id
let hospitalId = ref('')

let countHospital = ref('')

let hospitals = ref([])

const tbd = ref([])

const loading = ref(true)

let pages = ref({})

let ids = ref([])

let dialogStatus = ref()

const dialogVisible = ref(false)

const returnSiteId = ref()

/**
 * 批量分配
 * @param val当前选中行数据
 */
let handleSelectionChange = (val) => {
  let list = [];
  val.forEach((val)=>{
    list.push(val.id)
  })
  ids.value = list;
}

/**
 * 修改dialog弹窗为"退回"
 * @param row
 */
function changeDialogStatus(row){
  dialogStatus.value = 1
  dialogVisible.value = true
  returnSiteId.value = row.row.id;
}

/**
 * 退回
 */
function returnSite(){
  frozen.returnSite(returnSiteId.value).then(res => {
    tableSuccessTips(res);
    dialogVisible.value = false;
  })
}

const handleSizeChange = (val) => {
  pages.value.pageSize = val;
  getTbd(pages.value.pageNum, pages.value.pageSize)
}

const handleCurrentChange = (val) => {
  pages.value.pageNum = val;
  getTbd(pages.value.pageNum, pages.value.pageSize)
}


function getCountHospital(e) {
  let [name] = e;
  countHospital.value = name;
}

/**
 * 获取病理类型
 */
function getPathology() {
  triage.getPathology().then(res => {
    pathologys.value = res.data;
  })
}

function getApplayForHospital() {
  triage.getApplayForHospital().then(res => {
    hospitals.value = res.data;
  })
}

function getCaseByHospital() {
  frozen.getCaseByHospital(4, countHospital.value, pages.value.pageNum, pages.value.pageSize).then(res => {
    tbd.value = res.data;
    pages.value.pageNum = res.data.pageNum
    pages.value.pageSize = res.data.pageSize
    pages.value.size = res.data.size
    loading.value = false;
  })
}

function getCountCase(row){
  dialogStatus.value = 0
  dialogVisible.value = true
  ids.value.push(row.row.id)
}

/**
 * 批量分配
 */
function definiteAllocation(){
  frozen.allotCaseSlide(ids.value).then(res =>{
    tableSuccessTips(res)
    dialogVisible.value = false;
  })
}

function tableSuccessTips(res){
  if (res.code == 200){
    ElMessage({
      message: res.msg,
      type: 'success',
    })
    getCaseByHospital();
  }else if (res.code == 500){
    ElMessage.error(res.msg)
  }
}

getPathology();
getApplayForHospital();
getCaseByHospital();
</script>

<style scoped>
#span-right {
  padding-right: 20px;
}

.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped
.el-table__row--striped td {
  background-color: #eaf3fb;
}
</style>